import React, { Component } from 'react';
import { connect } from 'dva';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { formatMessage } from 'umi-plugin-react/locale';
import { Row, Col, Form, Button, Select, DatePicker, Statistic, Spin, Tooltip, Icon } from 'antd';
import styles from './index.less';
import dataTime from '../../../utils/dataTime';
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入折线图
import 'echarts/lib/chart/line';
// 引入提示框和标题组件
// 引入提示框和title组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
// 引入legend模块
require('echarts/lib/component/legend');
// eslint-disable-next-line import/order
import moment from 'moment';
import { TimelineChart } from '@/components/Charts';
import { fakeTrendChartData } from '@/services/datastatistics';
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY/MM/DD';
const FormItem = Form.Item;
const Option = Select.Option;
let myChart;

@connect(({ accessTrends, loading }) => ({
  accessTrends,
  loading: loading.effects['accessTrends/fetch'],
}))
class AccessTrends extends Component {
  constructor() {
    super();
    this.state = {
      multipleTime: '1',
      login: false,
      channel: '',
      fromDate: '',
      toDate: '',
      range: '',
      timeB: false,
      number: '1',
      robotList: [],
      robotId: '0',
      loading: true
    };
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  // 图表数据
  timeFalseDate = obj => {
    let chartDataB = [];
    let xAxisData = [];
    let seriesData1 = null;
    let seriesData2 = null;
    const { dispatch, currentUser } = this.props;
    const { robotId, fromDate, toDate } = this.state;
    this.setState({ loading: true }, () => {
      this.reqRef = requestAnimationFrame(async () => {
        const res = await fakeTrendChartData(obj)
        xAxisData = res.visitTrend.map(item => item.x); //日期
        seriesData1 = res.qaTrend.map(item => item.y);//问答数量
        seriesData2 = res.visitTrend.map(item => item.y);//访问人数
        let chartObj = {
          xAxisData,
          seriesData1,
          seriesData2
        }
        this.lineEchart(chartObj);
        this.setState({
          chartDatB: chartDataB,
          askTotal: res.qaNum,
          visitorTotal: res.visitNum,
          loading: false
        });
      });
    })
  };

  lineEchart = res => {
    let seriesData2 = res.seriesData2;
    let max;
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption({
      color: ['#14c9c0 ', '#fb9505'],
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: [formatMessage({ id: 'app.accessTrends.number-questions-answers' })+'('+formatMessage({ id: 'app.accessTrends.next' })+')', formatMessage({ id: 'app.accessTrends.visitorspp.accessTrends.number-questions-answers' })+'('+formatMessage({ id: 'app.accessTrends.person' })+')'],
        icon: 'roundRect',
        top: 'bottom',
        itemWidth: 10, //图例图标宽度
        itemHeight: 5, //图例图标高度
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '30',
        top: '30',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#e0e0e0',
              width: 2,
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#808080',
            },
          },
          boundaryGap: false,
          data: res.xAxisData,
        },
      ],

      yAxis: [
        {
          type: 'value',
          name: formatMessage({ id: 'app.accessTrends.number-questions-answers' })+'('+formatMessage({ id: 'app.accessTrends.next' })+')',
          nameTextStyle: {
            color: '#9a9a9a',
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#808080',
            },
          },
          splitLine: {
            //网格线
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: '#14c9c0 ',
              width: 3, //这里是为了突出显示加上的
            },
          },
        },
        {
          type: 'value',
          name: formatMessage({ id: 'app.accessTrends.visitors' })+'('+formatMessage({ id: 'app.accessTrends.person' })+')',
          nameTextStyle: {
            color: '#9a9a9a',
          },
          min: 0,
          max: max,
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#808080',
            },
            show: true,
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: {
              type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
            },
          },
          axisLine: {
            lineStyle: {
              color: '#fb9505',
              width: 3, // 这里是为了突出显示加上的
            },
          },
        },
      ],
      series: [
        {
          name: formatMessage({ id: 'app.accessTrends.number-questions-answers' })+'('+formatMessage({ id: 'app.accessTrends.next' })+')',
          type: 'line',
          data: res.seriesData1,
          smooth: true,
        },
        {
          name: formatMessage({ id: 'app.accessTrends.visitors' })+'('+formatMessage({ id: 'app.accessTrends.person' })+')',
          type: 'line',
          data: res.seriesData2,
          yAxisIndex: 1,
          smooth: true,
        },
      ],
    });
    window.addEventListener('resize', function () {
      if(myChart){
        myChart.resize();
      }
    });
  };

  // 多选｛所有渠道1 网站2 微信3 app4 其它5｝
  handleChange = value => {
    this.setState({
      multipleTime: value,
    });
  };

  render() {
    return (
      <div style={{marginTop:20}}>
        {/* 表头开始 */}
        <Row>
          <Col span={24}>
            <div className={styles.textHeader}>
              <div className={styles.textTitle}><img src={staticPath+"/homeImg/more.png"} /><span><FormattedMessage id="app.accessTrends.VisitersChart" /></span></div>
              <div style={{ marginLeft: 20 }}>
                <FormattedMessage id="app.accessTrends.Visiters" />
                <div>
                  {/* {this.state.visitorTotal} */}
                  <Statistic
                    valueStyle={{ fontSize: 30, color: '#333' }}
                    suffix={
                      <FormattedMessage
                        id="app.accessTrends.person"
                        defaultMessage="accessTrends Person"
                      />
                    }
                    value={this.state.visitorTotal}
                  />
                </div>
              </div>
              <div style={{ marginLeft: 20 }}>
                <FormattedMessage id="app.accessTrends.QuestionsAsked" />
                <div>
                  {/* {this.state.askTotal} */}
                  <Statistic
                    valueStyle={{ fontSize: 30, color: '#333' }}
                    suffix={
                      <FormattedMessage id="app.accessTrends.next" defaultMessage="next" />
                    }
                    value={this.state.askTotal}
                  />
                </div>
              </div>
            </div>
          </Col>
        </Row>
        {/* 图表开始 */}
        <Spin spinning={this.state.loading}>
          <Row id="main" className={styles.colorBackgrounds}>
            <Col span={24}>
              <div style={{ margin: '0px 30px 0px 30px' }}></div>
            </Col>
          </Row>
        </Spin>
      </div>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(AccessTrends);
